<!--
/**
 * @author xuyh0817
 * @email xuyh0817@foxmail.com
 * @date 2022-04-16 18:04
 * @version 2.0.0
 * @doc todo
 * @website todo
 * @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
 */
 -->
<template>
  <div class="test">
    <ul class="left">
      <li :class="{'active': currentIndex == item}" v-for="(item) in keys" :key="item"
          @click.prevent.stop="currentIndex = item">
        {{ item }}
      </li>
    </ul>
    <TestTable :data="datas" :date="currentIndex"></TestTable>
  </div>
</template>

<script>
import {data} from './data'
import TestTable from './table'

export default {
  name: "test",
  components: {
    TestTable
  },
  data() {
    return {
      list: data,
      currentIndex: 0
    }
  },
  computed: {
    keys: {
      get() {
        const {list} = this
        let keys = Object.keys(list);
        return keys
      }
    },
    datas: {
      get() {
        const {list, currentIndex} = this
        if (!currentIndex) {
          return []
        }
        return list[currentIndex]
      }
    }
  },
  mounted() {
    this.currentIndex = this.keys[0]
  }
}
</script>

<style scoped>
.test {
  padding: 10px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 200px calc(100% - 320px);
}

li {
  cursor: pointer;
  line-height: 32px;
}

li:hover, li:focus {
  color: #f44;
}

.active {
  color: #f44;
}
</style>
